Setech | IT Services and Solutions HTML Template

Introduction

First of all, thank you so much for purchasing this theme and for being our loyal customer. You are awesome!
You are entitled to get free lifetime updates to this product + exceptional support from the author directly.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly.

This guide covers all the needed information for building an amazing website, as well as some helpful tips and tricks that will make your experience working with this theme easier and more enjoyable. If you need any additional assistance while using the theme, you can always contact us via email and our support team will be glad to help you out.

Installing Setech #back to top

Having downloaded the template package, please extract the contents of the archive. There you will find 'setech' folder.
Upload the contents of 'setech' folder to your webserver using FTP client like FileZilla.
Once the files are uploaded, go to your_domain_name/index.html

CSS Files and Structure #back to top

Setech has a fixed layout with up to 12 columns. All the information within the main content area is nested within a div. The general template structure is the same throughout the template as it uses the Bootstrap framework.

The multi column layout consists of the .col-md-(from 1 to 12) classes. See Bootstrap documentation here: https://getbootstrap.com/

We're using the following CSS files in this template. Those files also contain some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind that these values might be overridden somewhere else in the files below:

style.css - main css file (included reset styles);
bootstrap.css - Bootstrap css file;
font-awesome.css - FontAwesome icons stylesheet;
owl.css - OWL carousel stylesheet;
jquery.fancybox.css - FancyBox plugin styles;

At first glance, the CSS may look confusing, let me explain each below:

Main CSS Files

style.css - This is the main CSS file that controls nearly everything on the site. This stylesheet is full of different color styles.
bootstrap.css - Bootstrap CSS, you don't need to edit this file
fancybox.css - FancyBox CSS, you don't need to edit this file

style.css file contains specific stylings for the page. The file is separated into sections using:

1. Fonts
2. Reset
3. Global
4. Content Elements 
5. Main Header
6. Search Popup
7. Sticky Header
8. Mobile Header
9. Mobile Menu
10. Header Style / Two / Three / Four
11. Color Scheme / Red / Purple
12. Page Title
13. Section Title
14. Main Slider
15. Top Features
16. Features Section / Two / Three / Four
17. Fun Fact Section / Two / Three 
18. Services Section / Two
19. Why Choose us
20. Case Study Section
21. Brand Section
22. Free Consultation
23. Get Started
24. Faqs Section
25. Team Section
26. Clients Section
27. Process Section / Two
28. Consultation Section
29. Testimonials Section / Twp
30. Fluid Section One / Two / Three / Four
31. Pricing Section
32. News Section
33. Blog Post
34. Portfolio Section
35. Portfolio Single
36. Call to Action
37. Call Back Section
38. Main Footer
39. Sidebar Page Container
40. Comment Form
41. Our Shop
42. Product Details
43. Product Tabs
44. Related Products
45. Cart Section
46. CheckOut Page
47. Contact

Javascript Files and Structure

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-select.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/scroll-up-bar.min.js"></script>
<script src="assets/js/jquery.fancybox.min.js"></script>
<script src="assets/js/counterup.min.js"></script>
<script src="assets/js/perfect-scrollbar.min.js"></script>
<script src="assets/js/slick.min.js"></script>
<script src="assets/js/particles.min.js"></script>
<script src="assets/js/particle-int.js"></script>
<script src="assets/js/custom-scripts.js"></script>

These are the list of Javascript files that are loaded into templates in end of the Body Section.

Google Fonts

The template usually loads fonts from Google Web Fonts Direcotry, you can change the font with the one that suits you best.

@import url('https://fonts.googleapis.com/css?family=ABeeZee:400,400i|Roboto:300,400,500,700|Leckerli+One|Merienda+One&display=swap');

Template customization #back to top

You can customize this template according to your needs. Here are some basic changes you might need.

Logo Change

Just replace the image with your own one:

<div class="logo"><a href="index.html"><img src="images/logo.png" alt="" title=""></a></div>

Apply the above steps to every HTML page you need.

Menu Items

Bellow code shows the way to edit your menu items:

<!-- Main Menu -->
<nav class="main-menu navbar-expand-md navbar-light">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navigation clearfix">
<li class="current dropdown">
<a href="#"><span>Home</span></a>
<ul>
<li class="current"><a href="index.html">Home 1</a></li>
<li><a href="index-2.html">Home 2</a></li>
<li><a href="index-3.html">Home 3</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#"><span>Pages</span></a>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="case-study.html">Case Study</a></li>
<li><a href="why-choose-us.html">Why Choose Us</a></li>
<li><a href="pricing-plans.html">Pricing Plans</a></li>
<li><a href="managed-it.html">Managed IT</a></li>
<li><a href="it-consultancy.html">IT Consultancy</a></li>
<li><a href="elements.html">Content Items</a></li>
</ul>
</li>
<li class="dropdown has-mega-menu">
<a href="#"><span>Blog</span></a>
<div class="mega-menu" data-width="1110px">
<div class="mega-menu-bar row">
<div class="column col-lg-3 col-md-3 col-sm-12">
<h3>Blog</h3>
<ul>
<li><a href="blog-checkerboard.html">Checkerboard</a></li>
<li><a href="blog-masonry.html">Masonry</a></li>
<li><a href="blog-two-col.html">Two Columns</a></li>
<li><a href="blog-three-col.html">Three Colums</a></li>
<li><a href="blog-three-col-wide.html">Three Col Full Width</a></li>
<li><a href="blog-four-col-wide.html">Four Col Full Width</a></li>
</ul>
</div>
<div class="column col-lg-3 col-md-3 col-sm-12">
<h3>Standard</h3>
<ul>
<li><a href="blog-large-images.html">Large Images</a></li>
<li><a href="blog-small-images.html">Small Images</a></li>
<li><a href="blog-right-sidebar.html">Right Sidebar</a></li>
<li><a href="blog-left-sidebar.html">Left Sidebar</a></li>
</ul>
</div>
<div class="column col-lg-3 col-md-3 col-sm-12">
<h3>Post Types</h3>
<ul>
<li><a href="blog-post-audio.html">Audio</a></li>
<li><a href="blog-post-gallery.html">Gallery</a></li>
<li><a href="blog-post-link.html">Link</a></li>
<li><a href="blog-post-quote.html">Quote</a></li>
<li><a href="blog-post-image.html">Image</a></li>
<li><a href="blog-post-video.html">Video</a></li>
</ul>
</div>
<div class="column col-lg-3 col-md-3 col-sm-12">
<h3>Latest Posts</h3>
<div class="header-post-widget">
<article class="latest-post">
<figure class="thumb"><img src="images/resource/post-thumb-5.jpg" alt=""></figure>
<h6>Workforce a security</h6>
<span class="info">Sep 9, 2019</span>
<a href="#" class="overlay-link"></a>
</article>
<article class="latest-post">
<figure class="thumb"><img src="images/resource/post-thumb-6.jpg" alt=""></figure>
<h6>One call for IT</h6>
<span class="info">Sep 9, 2019</span>
<a href="#" class="overlay-link"></a>
</article>
<article class="latest-post">
<figure class="thumb"><img src="images/resource/post-thumb-7.jpg" alt=""></figure>
<h6>Monroe county</h6>
<span class="info">Sep 9, 2019</span>
<a href="#" class="overlay-link"></a>
</article>
</div>
</div>
</div>
</div>
</li>
<li class="dropdown">
<a href="#"><span>Portfolio</span></a>
<ul>
<li class="dropdown"><a href="#">Portfolio Singles</a>
<ul>
<li><a href="portfolio-single-small-images.html">Small Images</a></li>
<li><a href="portfolio-single-small-slider.html">Small Slider</a></li>
<li><a href="portfolio-single-large-slider.html">Large Slider</a></li>
<li><a href="portfolio-single-gallery.html">Gallery</a></li>
<li><a href="portfolio-single-small-masonry.html">Small Masonry</a></li>
<li><a href="portfolio-single-large-masonry.html">Large Masonry</a></li>
</ul>
</li>
<li><a href="portfolio-asymetric.html">Asymetric</a></li>
<li><a href="portfolio-motion-category.html">Motion Category</a></li>
<li><a href="portfolio-slider.html">Slider </a></li>
<li><a href="portfolio-masonry.html">Masonry </a></li>
<li><a href="portfolio-three-col.html">Three Columns </a></li>
<li><a href="portfolio-slide-left.html">Slide from left</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#"><span>Shop</span></a>
<ul>
<li><a href="shop.html">Shop</a></li>
<li><a href="shop-single.html">Product Single</a></li>
<li><a href="shopping-cart.html">Shopping Cart</a></li>
<li><a href="checkout.html">Checkout</a></li>
</ul>
</li>
<li><a href="contact.html">Contacts</a></li>
</ul>
</div>
</nav>
<!-- Main Menu End-->

Apply the above steps to every HTML page you need.

Image Slider:
Our template uses a very powerful Revolution Slider plugin. The slider's documentation may be found here.

Typography:

Select a suitable font for your main menu or content. (for example we can choose any font from google fonts: http://www.google.com/webfonts#ChoosePlace:select)
Let's choose Happy Monkey font as example.

All you need is to import the font at the beginning of the style.css file:

@import url(http://fonts.googleapis.com/css?family=Happy+Monkey);

and edit the according class or ID.
In case of changing the menu text font, we need to find and replace font-family here:

.main-menu .navigation > li > a{
    position:relative;
    display:block;
    text-align:center;
    opacity:1;
    font-size: 16px;
    line-height: 36px;
    font-weight:500;
    color:#ffffff;
    padding: 23px 16px;
    -webkit-transition:all 300ms ease;
    -moz-transition:all 300ms ease;
    -ms-transition:all 300ms ease;
    -o-transition:all 300ms ease;
    transition:all 300ms ease;
}

Replace font family 'Happy Monkey' with your own one in the code above.
The same steps we should take to change all other fonts;

Email setup for contact form: Our PressView template includes working contact form. To change the email address so that all the messages would come to your email you'll need to edit just one file called "sendemail.php" at line #11 which is located in the "php" folder:

$ourMail = "your_email@mail.com";

so, instead of "your_email@mail.com" just input your email address and upload the file to your host. That's all! The contact form, widget and signup page will send all inquiries to your email address.

Google Map setup:

Google Map setup is a very easy process. All you have to do is to add the map iframe url where you wish.

                                
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12609.73108660754!2d-122.47279800000001!3d37.803331!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808586e6302615a1%3A0x86bd130251757c00!2sStorey%20Ave%2C%20San%20Francisco%2C%20CA%2094129!5e0!3m2!1sen!2sus!4v1577174486999!5m2!1sen!2sus" height="450" style="border:0; width:100%;"></iframe>

That's all, your google map is setup and ready to use!

JavaScript #back to top

This template imports the following Javascript files. You can get more script info when clicking the appropriate link:

script.js - main js file.
jquery.fancybox.pack.js. Refer to the author's documentation for additional notes on how to use it.
jquery.isotope.min.js Refer to the author's documentation for additional notes on how to use it.
owl.carousel.js Refer to the author's documentation for additional notes on how to use it.
jquery.ui libraries Refer to the author's documentation for additional notes on how to use it.
jquery.min.js Refer to the author's documentation for additional notes on how to use it.

PSD Files #back to top

We've included some PSD files to make the re-design process a bit easier.

Please check the PSD folder for all included PSD files.

Credits #back to top

We've used the following images, icons and other resources as listed.

Flaticon library - Free Vector Icons - http://www.flaticon.com/
FancyBox - jQuery Plugin - http://fancyapps.com
jQuery - www.jquery.com
Maps - Maps.Google.com used in live demo